<html>
<head>
    <meta charset="utf-8" />
    <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
        Filter features by geometry with SceneLayer | Sample | ArcGIS API for
        JavaScript 4.18
    </title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #infoDiv {
            background-color: white;
            padding: 10px;
            width: 260px;
            margin: 5px;
            position: absolute;
            bottom: 15px;
            right: 10px;
            font-size: 14px;
            display: none;
        }

        .geometry-options {
            display: flex;
            flex-direction: row;
        }

        .geometry-button {
            flex: 1;
            border-style: solid;
            border-width: 1px;
            border-image: none;
        }

        .geometry-button-selected {
            background: #4c4c4c;
            color: #fff;
        }

        .options {
            max-width: 260px;
            width: 100%;
            height: 25px;
        }

        #bufferNum {
            width: 90%;
            margin: 2.5em auto 0;
        }
    </style>

    <link
            rel="stylesheet"
            href="https://js.arcgis.com/4.18/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.18/"></script>

    <script>
        require([
            "esri/WebScene",
            "esri/views/SceneView",
            "esri/layers/GraphicsLayer",
            "esri/widgets/Sketch/SketchViewModel",
            "esri/widgets/Slider",
            "esri/views/layers/support/FeatureFilter",
            "esri/geometry/geometryEngine",
            "esri/Graphic"
        ], function (
            WebScene,
            SceneView,
            GraphicsLayer,
            SketchViewModel,
            Slider,
            FeatureFilter,
            geometryEngine,
            Graphic
        ) {
            // Load webscene and display it in a SceneView
            const webscene = new WebScene({
                portalItem: {
                    id: "47241277f5c249d6b1c13840192a7cb0"
                }
            });

            // create the SceneView
            const view = new SceneView({
                container: "viewDiv",
                map: webscene
            });



        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>
